<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>公共导航分类管理 - XYZ博客</title>
  <meta name="keywords" content="XYZ博客,公共导航分类管理" />
  <meta name="description" content="XYZ博客的公共导航分类管理。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="/pear/component/pear/css/pear.css" />
</head>
<body class="pear-container">

  <blockquote class="layui-elem-quote">
    在这里可以管理你网站首页公共导航分类。最多可以设置十二个公共导航网站分类。
  </blockquote>

  <table class="layui-hide" id="nav" lay-filter="nav"></table>

  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="website">管理网站</a>
  </script>

  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="addNav">新增公共导航分类</button>
    </div>
  </script>

</body>
<script src="/pear/component/layui/layui.js"></script>
<script src="/pear/component/pear/pear.js"></script>
<script src="/blogs/assets/js/jquery.min.js"></script>
<script th:inline="none">
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  layui.use(['element', 'form', 'table', 'laypage', 'common'], function() {
    var element = layui.element;
    var form = layui.form;
    var table = layui.table;
    var laypage = layui.laypage;
    let common = layui.common;

    layer.msg('使用电脑展示更佳', {
      closeBtn: 1,
      icon: 6,
      time: 3 * 1000,
      offset: '21px'
    });

    table.render({
      elem: '#nav',
      url: '/navClassify/navClassifyList',
      toolbar: '#toolbarDemo',
      cols: [[
        {type: 'checkbox'}
        ,{field:'id', title: 'ID', align: 'center'}
        ,{field:'name', title: '导航分类名字', width:180, align: 'center'}
        ,{field:'icon', title: '导航分类图标', width:280, align: 'center'}
        ,{field:'tagName', title: '导航分类标签名字', width:180, align: 'center'}
        ,{field:'addTime', title: '新增时间', width:180, align: 'center'}
        ,{field:'updateTime', title: '修改时间', width:180, align: 'center'}
        ,{title:'操作', toolbar: '#barDemo', width: 280, align: 'center'}
      ]],
      page: false,
      skin: 'line',
      defaultToolbar: [{
        title: '刷新',
        layEvent: 'refresh',
        icon: 'layui-icon-refresh',
      }, 'filter', 'print', 'exports']
    })

    // 工具栏事件
    table.on('toolbar(nav)', function(obj){
      var id = obj.config.id;
      var checkStatus = table.checkStatus(id);
      var othis = lay(this);
      switch(obj.event){
        case 'addNav':
          layer.open({
            title: '新增公共导航分类',
            type: 2,
            shade: 0.1,
            area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
            content: '/navClassify/navClassifyAddPage'
          });
          break;
        case 'refresh':
          window.refresh();
          break;
      };
    });

    // 触发单元格工具事件
    table.on('tool(nav)', function(obj){ // 双击 toolDouble
      var data = obj.data;
      // console.log(obj)
      if(obj.event === 'del'){
        window.remove(obj);
      } else if(obj.event === 'edit'){
        layer.open({
          title: '编辑公共导航分类',
          type: 2,
          shade: 0.1,
          area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
          content: '/navClassify/navClassifyUpdatePage?id=' + data.id
        });
      } else if(obj.event === 'website'){
        window.location.href = '/navWebsite/navWebsiteListPage?navClassifyId=' + data.id
      }
    });

    window.refresh = function(param) {
      table.reload('nav');
    }

    window.remove = function(obj) {
      layer.confirm('确定要删除这个公共导航分类', {
        icon: 3,
        title: '提示'
      }, function(index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: "/navClassify/deleteNav",
          data: {
            "id": obj.data.id
          },
          type: 'delete',
          success: function(result) {
            layer.close(loading);
            if (result.code == 200) {
              layer.msg(result.message, {
                icon: 1,
                time: 2000
              }, function() {
                obj.del();
              });
            } else {
              layer.msg(result.message, {
                icon: 2,
                time: 2000
              });
            }
          }
        })
      });
    }

  })
</script>
</html>